<template>
  <div>
    <div>实际年龄: {{ age }}</div>
    <div>女人公布的年龄: {{ womanAge }}</div>
    <div>
      <button @click="age++">年龄+1</button>
    </div>
  </div>

  <div>
    <input type="text" v-model="name" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
const age = ref(18)
const womanAge = computed(() => age.value - 2)

const name = ref('张三')
watch(name, (newVal, oldVal) => {
  console.log('name changed from', oldVal, 'to', newVal)
})
</script>

<style scoped></style>
